<template>
    <div class="syshint" :style="{height:height}">
        <div class="hintcontent">
            <img v-if="type=='hello'" src="./../../assets/images/dog/hello.png" alt="">
            <img v-if="type=='error'" src="./../../assets/images/dog/error.png" alt="">
            <img v-if="type=='finsh'" src="./../../assets/images/dog/finsh.png" alt="">
            <img v-if="type=='gg'" src="./../../assets/images/dog/gg.png" alt="">
            <img v-if="type=='loading'" src="./../../assets/images/dog/loading.png" alt="">
            <img v-if="type=='sleep'" src="./../../assets/images/dog/sleep.png" alt="">
            <img v-if="type=='success'" src="./../../assets/images/dog/success.png" alt="">
            <div class="title">{{title}}</div>
            <div class="desc">{{desc}}</div>
            <div class="info">
                <span class="self">
                    <slot></slot>
                </span>
                
            </div>
            
        </div>
        
    </div>    
</template>
<script>
export default {
    props:{
        height:{
            type: String,
            default:'100%'
        },
        title:{
            type: String,
            default:''
        },
        desc:{
            type: String,
            default:''
        },
        type:{//图片类型    分别代表不同的图片
            type: String,
            default:'hello'
        }
    }
}
</script>
<style lang="less">
.syshint{
    min-height: 400px;
    position: relative;
    background: #fff;
    .hintcontent{
        position: absolute;
        width: 100%;
        top: 50%;
        text-align: center;
        transform: translateY(-50%);
        color:#3a3a3a;
        .title{
            font-size:16px;
            letter-spacing:0;
        }
        .desc{
            padding-top: 10px;
            font-size:14px;
            letter-spacing:0;
            line-height:28px;
        }
        .self{
            color: #224792;
            cursor: pointer;
            padding: 5px 20px;
            border-bottom: 2px solid  ;
        }
    }
}
</style>


